<template>
  <div class="list">
    <div class="left">
      <span
        :class="{'selected':type == 1}"
        @click="type=1"
      >
        法律
      </span>
      <span
        :class="{'selected':type == 2}"
        @click="type=2"
      >
        法规
      </span>
      <span
        :class="{'selected':type == 3}"
        @click="type=3"
      >
        其他
      </span>
    </div>
    <a-list
      :pagination="pagination"
      item-layout="horizontal"
      :data-source="sourceData"
      @change='handleChange'
    >
      <a-list-item
        slot="renderItem"
        slot-scope="item"
      >
        <a-list-item-meta description="">
          <a
            slot="title"
            @click="$emit('clickDetail',item.id,item.title)"
          >{{ item.title }}</a>
        </a-list-item-meta>
      </a-list-item>
    </a-list>

  </div>
</template>
<script>
export default {
  name: 'list',
  props: ['applicableType'],
  data () {
    return {
      sourceData: [],
      type: 1,
      pagination: {
        total: 0,
        position: 'bottom',
        current: 1, // 当前页数
        pageSize: 10, // 每页条数
        showSizeChanger: true, // 每页显示条数
        hideOnSinglePage:true   //只有一页时是否隐藏分页器
      },
    };
  },
  mounted () {
    // this.lawLIist()
  },
  methods: {
    lawLIist () {
      const { applicableType, type, pagination: { current, pageSize } } = this
      this.$axios({
        url: 'law/list',
        method: 'get',
        loadingEl: this.$el,
        cancel: {
          _self: this
        },
        params: {
          applicableType: applicableType,
          curPage: current,
          pageSize: pageSize,
          type: type
        }
      }).then(res => {
        this.sourceData = res.data.lawList
        this.pagination.current = res.data.curPage
        this.pagination.total = res.data.total
      })
    },
    handleChange (pagination) {
      this.pagination = pagination
      this.lawLIist()
    }
  },
  watch: {
    type: {
      handler () {
        this.pagination.current = 1
        this.lawLIist()
      },
      immediate: true
    }
  }
};
</script>
<style scoped lang="less">
.list {
  height: 100%;
  display: flex;
  justify-content: space-between;
  .left {
    display: flex;
    width: 72px;
    flex-direction: column;
    align-items: flex-start;
    border-right: 1px solid #e8e8e8;
    > span {
      display: inline-block;
      width: 100%;
      padding-left: 16px;
      line-height: 50px;
      height: 50px;
      cursor: pointer;
      &.selected {
        color: #1890ff;
      }
    }
  }
}
/deep/.ant-list {
  margin-left: 30px;
  flex: 1;
}
</style>